<template>
  <div class="index">
    <div class="endCup"></div>
    <div class="text"></div>

    <div class="box">
      <div class="time_box">
        <div class="timeBg">
          <span>{{ this.minutes }}</span>
        </div>
        <div class="timeText">分</div>
        <div class="timeBg">
          <span>{{ this.seconds }}</span>
        </div>
        <div class="timeText">秒</div>
      </div>
      <div class="shareText">
        <div>哇噢，成绩不错噢~</div>
        <div>快去分享给好友炫耀一下~</div>
      </div>
      <div class="btuBg" @click.stop="goImg">分享给好友</div>
      <div class="btuBg" @click.stop="goRegister">再次体验</div>
      <div class="btuBg" @click.stop="goIndex">返回首页</div>
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <div class="bot_left_top">长按识别二维码</div>
        <div class="bot_left_botttom">
          <div>体验更多</div>
          <div class="btn_arrow"></div>
        </div>
      </div>
      <div class="bottom_right">
        <img src="@/assets/end/QRcode.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      minutes: 0,
      seconds: 0,
    };
  },
  created() {
    this.getTime();
  },

  methods: {
    goImg() {
      this.$router.push({
        path: "/end/end2",
      });
    },
    goRegister() {
      this.$router.push({
        path: "/health/register/index",
      });
    },
    goIndex() {
      // 页面后不允许返回上一页
      this.$router.push({
        path: "/",
      });
    },
    getTime() {
      if (localStorage.getItem("seconds") === null) {
        const endTime = new Date(); // 记录结束时间
        const startTime = new Date(parseInt(localStorage.getItem("startTime")));
        const duration = endTime - startTime; // 计算用时

        // 将用时转换为可读格式，限制时间最大为59分59秒
        this.minutes = Math.floor((duration % 3600000) / 60000);
        this.seconds = Math.floor(((duration % 3600000) % 60000) / 1000);

        // 检查 this.minutes 和 this.seconds 的值是否为 NaN、0 或不存在，并限制最大值
        this.minutes =
          isNaN(this.minutes) || this.minutes <= 0
            ? 0
            : Math.min(this.minutes, 59);
        this.seconds =
          isNaN(this.seconds) || this.seconds <= 0
            ? 0
            : Math.min(this.seconds, 59);

        console.log(`${this.minutes} 分 ${this.seconds} 秒`);

        localStorage.setItem("minutes", this.minutes);
        localStorage.setItem("seconds", this.seconds);
        // 输出或处理结果
        console.log(`${this.seconds} 秒`);
      } else {
        this.minutes = localStorage.getItem("minutes");
        this.seconds = localStorage.getItem("seconds");
      }

      // 停止计时，只在第一次获取时间后执行
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/end/endBg.png) no-repeat top;
  background-size: 100% 100%;
  // max-height: 1334px;
}
@media screen and (min-width: 440px) {
}
@media screen and (max-width: 440px) {
  .endCup {
    width: 403px;
    height: 398px;
    background: url(@/assets/end/endCup.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 3vh;
    transform: translate(-50%);
  }
  .text {
    width: 691px;
    height: 135px;
    background: url(@/assets/end/text.png) no-repeat center;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 14vh;
    transform: translate(-50%);
  }
  .box {
    position: absolute;
    left: 50%;
    top: 31.5vh;
    transform: translate(-50%);
    .time_box {
      display: flex;
      align-items: center;
      font-family: douyu;
      .timeBg {
        width: 120px;
        height: 120px;
        background: url(@/assets/end/timeBg.png) no-repeat center;
        background-size: 100% 100%;
        font-weight: 400;
        font-size: 54px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .timeText {
        font-weight: 400;
        font-size: 46px;
        color: #ffffff;
        line-height: 54px;
        text-shadow: 2px 3px 5px #f37948;
        margin: 0 17px;
      }
    }
    .shareText {
      margin-top: 30px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 32px;
      text-align: center;
      color: #ffffff;
      line-height: 40px;
      text-shadow: 1px 3px 4px rgba(169, 16, 0, 0.5);
    }
    .btuBg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 450px;
      height: 144px;
      background: url(@/assets/end/longButton.png) no-repeat center;
      background-size: 100% 100%;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 48px;
      color: #ffffff;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 2.5vh;
    transform: translate(-50%);
    .bottom_left {
      width: 336px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 48px;
      color: #ffffff;
      margin-right: 30px;
      .bot_left_botttom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn_arrow {
          width: 100px;
          height: 34px;
          background: url(@/assets/end/arrow.png) no-repeat center;
          background-size: 100% 100%;
        }
      }
    }
    .bottom_right {
      img {
        width: 220px;
        height: 220px;
      }
    }
  }
}
</style>
